<template>
    <div class="el_container" :style="{ backgroundColor: colorConfig.backgroundColor, color: colorConfig.textColor }">
        <div class="el-header" style="padding:0px;">
            <div style="width: 100%;height: 100%;clear: both;">
                <div class="header_logo">
                    <img :src="logoUrl" class="icon" />
                    <div class="logo_title">
                        <div class="logo_title_0">{{ title }}</div>
                        <!-- <div class="logo_title_1">THEFIRSTPEOPLE'SHOSPITALOFQINGZHEN</div> -->
                    </div>
                </div>
                <div class="header_title">{{ titleStr }}</div>
                <div class="header_date">
                    <div>{{ timeStr }}</div>
                    <div class="time">{{ dateStr }}</div>
                </div>
            </div>
        </div>
        <div class="el-main">
            <div class="el_main_content">
                <div class="left box" :style="{ backgroundColor: colorConfig.contentBackgroudColor }">
                    <div class="left_title">
                        <table class="table_title">
                            <tr>
                                <td>科室/诊室</td>
                                <td>医生/座位</td>
                                <td>正在就诊</td>
                                <td>准备就诊</td>
                            </tr>
                        </table>
                    </div>
                    <div class="left_content">
                        <table class="left_table_content">
                        </table>
                    </div>
                </div>
                <div class="right box" :style="{ backgroundColor: colorConfig.contentBackgroudColor }">
                    <div class="right_title">等候就诊</div>
                    <div class="right_content">
                        <table class="right_table_content">
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="el-footer">
            <div class='divWrap'>
                　　　　<div class='div'>
                    　　　　　　{{ footerStr }}
                    　　</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            title: "",
            footerStr: "",
            logoUrl: "../assets/logo.png",
            titleStr: "",
            timeStr: "",
            dateStr: "",
            colorConfig: {

            }
        }
    },
    mounted() {
        console.error("Global:", this.GLOBAL);
        let left_table_content = document.getElementsByClassName('left_table_content')[0];
        let right_table_content = document.getElementsByClassName('right_table_content')[0];
        window.addEventListener("CURRENT_UPDATE", () => {
            setCurrTable();
        });

        window.addEventListener("WAIT_UPDATE", (res) => {
            setWaitTable();
        });

        if (this.GLOBAL.device) {
            if (this.GLOBAL.device.deviceType == 2) {
                this.titleStr = this.GLOBAL.device.deptName;
            } else {
                this.titleStr = this.GLOBAL.device.areaName;
            }
            this.title = this.GLOBAL.device.title;
            this.footerStr = this.GLOBAL.device.tips;
            if (this.GLOBAL.device.logoUrl) {
                this.logoUrl = "http://" + this.GLOBAL.BASE_URL + this.GLOBAL.device.logoUrl;
            }
        } else {
            this.title = "清镇市第一人民医院";
            this.footerStr = "";
        }

        this.colorConfig = this.GLOBAL.colorConfig;
        window.addEventListener("LOGIN_SUCCESS", (res) => {
            this.colorConfig = this.GLOBAL.colorConfig;
            if (this.GLOBAL.device.deviceType == 2) {
                this.titleStr = this.GLOBAL.device.deptName;
            } else {
                this.titleStr = this.GLOBAL.device.areaName;
            }
            this.title = this.GLOBAL.device.title;
            this.footerStr = this.GLOBAL.device.tips;
            if (this.GLOBAL.device.logoUrl) {
                this.logoUrl = "http://" + this.GLOBAL.BASE_URL + this.GLOBAL.device.logoUrl;
            }
        });

        const event = new Date();
        const options = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
        this.dateStr = event.toLocaleDateString(undefined, options);
        this.timeStr = getTimer();

        let waitIndex = 0;
        setInterval(() => {
            let leftDiv = left_table_content.parentNode;
            if (leftDiv.scrollHeight > leftDiv.clientHeight) {
                leftDiv.scrollTop += 2;
            }
            let rightDiv = right_table_content.parentNode;
            if (rightDiv.scrollHeight > rightDiv.clientHeight) {
                if (rightDiv.scrollTop + rightDiv.clientHeight + 1 >= rightDiv.scrollHeight) {
                    waitIndex++;
                    if (waitIndex > 30) {
                        rightDiv.scrollTop = 0;
                        setTimeout(() => {
                            waitIndex = 0;
                        }, 3000);
                    }
                } else {
                    if (waitIndex == 0)
                        rightDiv.scrollTop += 2;
                }
            }
            this.timeStr = getTimer();
        }, 80);

        function setCurrTable() {
            let data = window['queueObject']['contentQueue'];
            var arr = JSON.parse(JSON.stringify(data));
            var vArr = [];
            vArr = arr;
            updateTable(left_table_content, vArr);
        }

        function setWaitTable() {
            let data = window['queueObject']['waitQueue'];
            let arr = JSON.parse(JSON.stringify(data));
            updateWaitTable(right_table_content, arr);
        }

        setCurrTable();
        setWaitTable();
    }

}
function getTimer() {
    let date = new Date();
    let seconds = date.getSeconds();
    let hours = date.getHours();
    let minutes = date.getMinutes();
    return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds)
}
function updateTable(el, arr) {
    let table = el;//document.getElementById('currTable');
    let cellHeight = 50;
    let htmlStr = "";
    let totalHeight = 0;
    for (let i = 0; i < arr.length; i++) {
        var item = arr[i];
        let color = i % 2 == 0 ? "background-color: rgba(255, 255, 255, 0.1);" : "";
        htmlStr += `<tr style="${color}height:70px;line-height:70px;">
                    <td>${item.showTitle}</td>
                    <td>${item.doctorName}</td>
                    <td>${item.curPatientName}</td>
                    <td>${item.waitPatientName}</td>
                </tr>`;
        totalHeight += cellHeight;
    }
    if (!table) return;
    table.style.height = totalHeight + "px";
    table.innerHTML = htmlStr;
}

function updateWaitTable(el, arr) {
    let table = el;
    let cellHeight = 50;
    let htmlStr = "";
    let totalHeight = 0;
    let vIndex = 0;
    for (let i = 0; i < arr.length; i++) {
        var item = arr[i];
        htmlStr += `<tr>
                    <th colspan="2">${item.showTitle}</th>
                </tr>`;
        var newArr = [];
        totalHeight += cellHeight;
        for (let j = 0; j < item.players.length; j++) {
            var index = Math.floor(j / 2);
            if (!newArr[index]) {
                newArr[index] = [];
            }
            newArr[index].push(item.players[j]);
        }
        let info = "";
        for (let k = 0; k < newArr.length; k++) {
            let color = k % 2 == 0 ? "background-color: rgba(255, 255, 255, 0.1);" : "";
            info += `<tr style="${color}height:70px;line-height:70px;">
                    <td style="${color}">${newArr[k][0].showTitle}</td>
                    <td style="${color}">${newArr[k][1] ? newArr[k][1].showTitle : ""}</td>
                </tr>`;
            totalHeight += cellHeight;
            vIndex++;
        }
        htmlStr += info;
    }
    if (!table) return;
    table.style.height = totalHeight + "px";
    table.innerHTML = htmlStr;
}


</script>

<style lang="scss">
// .el_container {
//     height: 100%;
//     width: 100%;
//     padding: 0px;
//     margin: 0px;
// }

// .el-main {
//     text-align: center;
//     padding: 0px;
//     margin: 0px;
//     height: calc(100% - 120px);
//     width: calc(100%);
//     padding: 10px;
// }

// .el_main_content {
//     width: 100%;
//     height: 100%;
// }

// .el_main_content .left {
//     width: calc(60% - 5px);
//     height: 100%;
//     float: left;
//     margin-right: 5px;
//     border-radius: 6px;
// }

// .el_main_content .left .left_title {
//     height: 50px;
//     line-height: 50px;
//     font-size: 25px;
//     // background-color: #0a80f6;
//     margin-left: 5px;
//     margin-right: 5px;
//     width: calc(100% - 10px);
// }

// .el_main_content .left .left_content {
//     height: calc(100% - 52px);
//     margin-bottom: 2px;
//     margin-left: 5px;
//     margin-right: 5px;
//     font-size: 20px;
//     overflow-x: hidden;
//     overflow-y: auto;
//     width: calc(100% - 10px);
// }

// .el_main_content .left .left_content table tr {
//     height: 40px;
//     line-height: 40px;
// }

// .left_content table tr td {
//     width: 22%;
// }

// .left_content table tr:first-child {
//     width: 34%;
// }

// .left_title table tr td {
//     width: 22%;
// }

// .left_title table tr:first-child {
//     width: 34%;
// }

// ////////////////////////////////////// RIGHT //////////////////////
// .el_main_content .right {
//     width: calc(40% - 5px);
//     height: 100%;
//     float: left;
//     margin-left: 5px;
//     border-radius: 6px;
// }

// .el_main_content .right .right_title {
//     height: 50px;
//     line-height: 50px;
//     font-size: 25px;
//     margin-left: 5px;
//     margin-right: 5px;
//     text-align: center;
// }

// .el_main_content .right .right_content {
//     height: calc(100% - 52px);
//     margin-bottom: 2px;
//     margin-left: 5px;
//     margin-right: 5px;
//     font-size: 20px;
//     overflow-x: hidden;
//     overflow-y: auto;
// }

// .el_main_content .right .right_content table tr {
//     height: 40px;
//     line-height: 40px;
// }



// .el-header,
// .el-footer {
//     text-align: center;
//     height: 60px;
//     line-height: 60px;
//     font-size: 25px;
//     background-color: rgba(255, 255, 255, 0.1);
//     margin: 0px;
//     padding: 0px;
// }

// .header_logo {
//     font-size: 20px;
//     width: 32%;
//     height: 60px;
//     line-height: 60px;
//     float: left;
//     margin-left: 5px;
// }

// .logo_title {
//     float: left;
//     height: 60px;
//     line-height: 60px;
//     text-align: left;
// }

// .logo_title_0 {
//     font-size: 25px;
//     height: 60px;
//     line-height: 60px;
//     font-weight: bold;
// }

// .logo_title_1 {
//     font-size: 9px;
//     height: 20px;
//     line-height: 20px;
// }

// .header_logo .icon {
//     height: 50px;
//     width: 50px;
//     text-align: right;
//     vertical-align: middle;
//     float: left;
//     margin-top: 5px;
// }

// .header_title {
//     font-size: 40px;
//     font-weight: bold;
//     width: calc(100%);
//     height: 60px;
//     line-height: 60px;
//     text-align: center;
//     padding-right: 20px;
//     position: absolute;
//     top: 0px;
// }

// .header_date {
//     // background-color: rgba(255, 255, 255, 0.5);
//     font-size: 20px;
//     width: calc(40%);
//     height: 60px;
//     line-height: 60px;
//     float: right;
//     text-align: right;
//     margin-right: 5px;
// }

// .header_date div {
//     height: 30px;
//     line-height: 30px;
//     padding-right: 5px;
//     font-size: 30px;
//     padding-top: 5px;
// }

// .header_date .time {
//     font-size: 12px;
//     height: 20px;
//     padding-top: 0px;
// }

// .divWrap {
//     width: calc(100%); //(宽度)
//     overflow: hidden; //（超出隐藏）
// }

// .div {
//     display: inline-block;
//     white-space: nowrap;
//     animation: 10s div linear infinite normal;
// }

// //根据自己情况调节，
// @keyframes div {

//     //起始位置
//     0% {
//         transform: translateX(100%);
//         -webkit-transform: translateX(100%);
//     }

//     //终点位置
//     100% {
//         transform: translateX(-150%);
//         -webkit-transform: translateX(-150%);
//     }
// }

// //划过暂停
// .div:hover {
//     display: inline-block;
//     white-space: nowrap;
//     animation: 10s div linear infinite normal paused;
// }
</style>